<template>
	<view>
		<view class="form_split_10"></view>
		<view class="form-line u-border-bottom" @click="openResetUsername">
			<view class="form-field">
				<view class="label">
					期望职位
				</view>
				<view class="text">
					{{username}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<view class="form-line u-border-bottom" @click="openResetPassword">
			<view class="form-field">
				<view class="label">
					修改密码
				</view>
				<view :class="username =='' ? 'text' : 'text ac'">
					{{username}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="form_split_10"></view>
		<view class="form-line u-border-bottom" @click="handlerCompanyAuth">
			<view class="form-field">
				<view class="label">
					企业认证
				</view>
				<view :class="company_auth? 'text ac' : 'text'">
					{{company_auth == 1 ? company_auth_text :  company_auth_text }}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="form-line u-border-bottom" @click="openResetMobile">
			<view class="form-field">
				<view class="label">
					企业认证
				</view>
				<view :class="mobile == '未绑定' ? 'text' : 'text ac'">
					{{mobile ? mobile :  '未绑定' }}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="form-line u-border-bottom" @click="openBindEmailModal">
			<view class="form-field">
				<view class="label">
					绑定邮箱
				</view>
				<view :class="email == '未绑定' ? 'text' : 'text ac'">
					{{email ? email :  '未绑定' }}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="box_title">第三方账号绑定后可以使用绑定的账号快速登录网站</view>
		<u-field placeholder-style="color:#757575;font-size:14px !important;" disabled label="腾讯QQ"
			:value="bind_qq == 1 ? '已绑定' : ''" placeholder="未绑定" class="form_choose reset_read_after"
			input-align="right" @click="handlerBindQq" />
		<view class=" form-line u-border-bottom" @click="handlerBindWeixin">
			<view class="form-field">
				<view class="label">
					微信
				</view>
				<view :class="bind_weixin ? 'text' : 'text ac'">
					{{bind_weixin == 1 ? '已绑定' : '未绑定' }}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="form_split_10"></view>
		<view class="form-line u-border-bottom" @click="handleClick()">
			<view class="form-field">
				<view class="label">
					系统消息
				</view>
				<view class="text">

				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="form-line u-border-bottom">
			<view class="form-field">
				<view class="label">
					登录日志
				</view>
				<view class="text">

				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="form-line u-border-bottom" @click="openFeedback">
			<view class="form-field">
				<view class="label">
					建议反馈
				</view>
				<view class="text">

				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="form_split_10" v-if="LoginTypee===1"></view>
		<view class="form-line u-border-bottom" v-if="LoginType===1" @click="openAccountModalTips">
			<view class="form-field">
				<view class="label">
					注销账号
				</view>
				<view class="text">

				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<view class="form_split_10"></view>
		<view style="margin: 16px;">
			<u-button shape="circle" type="primary" @click="openLogoutModal">
				退出登录
			</u-button>
		</view>
		<u-popup v-model="showResetUsername" mode="right" :mask="false" width="100%">
			<ResetUsername ref="resetUsername" :username_original="username" @closePopout="closeResetUsername">
			</ResetUsername>
		</u-popup>
		<u-popup v-model="showResetPassword" mode="right" :mask="false" width="100%">
			<ResetPassword ref="resetPassword" :is_set_password="is_set_password" @closePopout="closeResetPassword">
			</ResetPassword>
		</u-popup>
		<u-popup v-model="showResetMobile" mode="right" :mask="false" width="100%">
			<ResetMobile ref="resetMobile" :mobile_original="mobile" @closePopout="closeResetMobile"></ResetMobile>
		</u-popup>
		<u-popup v-model="showBindEmail" mode="right" :mask="false" width="100%">
			<BindEmail ref="bindEmail" :email_original="email" @closePopout="closeBindEmail"></BindEmail>
		</u-popup>
		<u-popup v-model="showFeedback" mode="right" :mask="false" width="100%">
			<Feedback ref="feedback" @closePopout="showFeedback = false"></Feedback>
		</u-popup>
		<u-modal v-model="showWeixinQrcode" title="认证" confirm-button-text="知道了">
			<view class="dialog_wx_qr">
				<view class="tip orange">截屏保存二维码图片，关注公众号</view>
				<view class="qr_img">
					<image :src="wechat_qrcode"></image>
				</view>
				<view class="tip_text">使用“扫一扫”打开图片，识别关注公众号完成绑定操作。绑定后即可随时随地接收最新消息通知。</view>
			</view>
		</u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
		<!-- 手机认证 -->
		<u-modal v-model="mobileModalTips" show-cancel-button title='系统提示' content="您的手机已认证，修改认证手机您的登录手机号将同步修改，是否继续？"
			@confirm="resetMobileConfirm" @cancel='mobileModalTips=false'></u-modal>
		<!-- 绑定邮箱 -->
		<u-modal v-model="emailModalTips" show-cancel-button title='系统提示' content="您的邮箱已认证，修改认证邮箱您的登录邮箱将同步修改，是否继续？"
			@confirm="openBindEmail" @cancel='emailModalTIps= false'></u-modal>
		<!-- 注销账号 -->
		<u-modal v-model="accountModalTips" show-cancel-button title='系统提示'
			content="提交申请将删除您的所有会员数据，永久注销会员账号。是否继续提交注销申请？" @confirm="handlerWithdraw" @cancel='accountModalTips=false'>
		</u-modal>

		<!-- 退出账号 -->
		<u-modal v-model="exitAccountModalTips" show-cancel-button title='系统提示' content="确定退出此账号吗？" @confirm="logout"
			@cancel='exitAccountModalTips = false'></u-modal>
	</view>
</template>

<script>
	import Feedback from '@/components/account/Feedback'
	import ResetUsername from '@/components/account/ResetUsername'
	import ResetPassword from '@/components/account/ResetPassword'
	import ResetMobile from '@/components/account/ResetMobile'
	import BindEmail from '@/components/account/BindEmail'
	import http from '@/utils/http'
	import api from '@/api'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'MemberAccount',
		// props: ['utype'],
		components: {
			ResetUsername,
			ResetPassword,
			ResetMobile,
			BindEmail,
			Feedback
		},
		data() {
			return {
				mobileModalTips: false, //手机认证提示模态框
				emailModalTips: false, // 绑定邮箱提示模态框
				accountModalTips: false, // 注销账号提示模态框
				exitAccountModalTips: false, // 退出账号提示框
				showFeedback: false,
				showWeixinQrcode: false,
				is_set_password: 0,
				company_auth: 0,
				company_auth_text: '',
				username: '',
				mobile: '',
				email: '',
				bind_qq: 0,
				bind_sina: 0,
				bind_weixin: 0,
				showResetUsername: false,
				showResetPassword: false,
				showResetMobile: false,
				showBindEmail: false
			}
		},
		created() {
			this.fetchData()
		},
		computed: {
			...mapState({
				LoginType: state => state.LoginType,
				wechat_qrcode: state => state.config.wechat_qrcode
			})
		},
		methods: {
			handleClick() {
				if (this.LoginType == 1) {
					uni.navigateTo({
						url: '/company/AccountManage/Msglist'
					})
				} else {
					uni.navigateTo({
						url: '/personal/AccountManage/Msglist'
					})
				}
			},
			fetchData() {
				http
					.post(api.member_account, {})
					.then(res => {
						this.is_set_password = res.data.data.is_set_password
						this.company_auth = res.data.data.company_auth
						this.company_auth_text = res.data.data.company_auth_text
						this.username = res.data.data.username
						this.mobile = res.data.data.mobile
						this.email = res.data.data.email
						this.bind_qq = res.data.data.bind_qq
						this.bind_sina = res.data.data.bind_sina
						this.bind_weixin = res.data.data.bind_weixin
					})
					.catch(() => {})
			},
			openAccountModalTips() {
				this.accountModalTips = true
			},
			handlerWithdraw() {
				http
					.post(api.account_cancel_apply, {})
					.then(res => {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success'
						})
					})
					.catch(() => {})
			},
			openLogoutModal() {
				this.exitAccountModalTips = true
			},
			logout() {
				this.$store.commit('setLoginState', {
					whether: false,
					utype: 0,
					token: '',
					mobile: '',
					userIminfo: {}
				})
				uni.navigateTo({
					url: '/views/Index'
				})
			},
			openFeedback() {
				// this.$refs.feedback.initCB()
				this.showFeedback = true
			},
			openResetUsername() {
				// this.$refs.resetUsername.initCB()
				this.showResetUsername = true
			},
			closeResetUsername(username) {
				this.username = username
				this.showResetUsername = false
			},
			openResetPassword() {
				// this.$refs.resetPassword.initCB()
				this.showResetPassword = true
			},
			closeResetPassword(is_set_password) {
				this.is_set_password = is_set_password
				this.showResetPassword = false
			},
			// 手机验证弹窗确认事件
			resetMobileConfirm() {
				this.showResetMobile = true
				// this.$refs.resetMobile.initCB()
			},
			openResetMobile() {
				if (this.mobile != '') {
					this.mobileModalTips = true
				} else {
					// this.$refs.resetMobile.initCB()
					this.showResetMobile = true
				}
			},
			closeResetMobile(mobile) {
				this.mobile = mobile
				this.showResetMobile = false
			},
			// 开启绑定邮箱提示框
			openBindEmailModal() {
				this.emailModalTips = true
			},
			openBindEmail() {
				if (this.email != '') {
					// this.$refs.bindEmail.initCB()
					this.showBindEmail = true
				} else {
					// this.$refs.bindEmail.initCB()
					this.showBindEmail = true
				}
			},
			closeBindEmail(email) {
				this.email = email
				this.showBindEmail = false
			},
			handlerCompanyAuth() {
				uni.navigateTo({
					url: '/member/company/auth'
				})
			},
			handlerBindQq() {
				if (this.bind_qq == 0) {
					const {
						href
					} = this.$Router.resolve({
						path: '/member/oauth/qq/bind'
					})
					window.location.href = href
				} else {
					this.$dialog
						.confirm({
							title: '系统提示',
							message: '解绑后无法使用QQ快速登录网站，是否确定解绑？'
						})
						.then(() => {
							http
								.post(api.unbind, {
									type: 'qq'
								})
								.then(() => {
									this.fetchData()
									this.$refs.uTips.show({
										title: 解绑成功,
										type: 'success'
									})
								})
								.catch(() => {})
						})
						.catch(() => {
							// on cancel
						})
				}
			},
			handlerBindWeixin() {
				if (this.bind_weixin === 1) {
					this.$dialog
						.confirm({
							title: '系统提示',
							message: '解绑后无法快速登录网站，是否确定解绑？'
						})
						.then(() => {
							http
								.post(api.unbind, {
									type: 'weixin'
								})
								.then(() => {
									this.fetchData()
									this.$refs.uTips.show({
										title: '解绑成功',
										type: 'success'
									})
								})
								.catch(() => {})
						})
						.catch(() => {
							// on cancel
						})
				} else {
					this.showWeixinQrcode = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_title {
		font-size: 24rpx;
		color: #999999;
		width: 100%;
		background-color: #f3f3f3;
		padding: 22rpx 32rpx;
	}

	.box_split_bar {
		width: 100%;
		height: 18rpx;
	}
</style>
